<template>
  <div id="billing">
    <div style="height: 40%">
      <div class="billing_title">
        <h1>开票抬头</h1>
        <el-button
          icon="iconfont icon-jiufuqianbaoicon06"
          size="mini"
          class="exportBtn add"
          @click="addBillingHeads('新增开票抬头')"
        >
          新增开票抬头
        </el-button>
      </div>

      <div class="table_box" style="height: calc(100% - 122px)">
        <el-table
          :data="billingData"
          class="table"
          height="100%"
          border
          ref="jdjgTable"
          :header-cell-style="{
            padding: '0px',
            background: 'linear-gradient(0deg, #F4F6F9, #EAECF4, #F3F6F9)'
          }"
          :row-class-name="tabRowClassName"
          header-row-class-name="mapTable_th"
        >
          <el-table-column label="开票公司名称" align="center" width="170" prop="rise"> </el-table-column>
          <el-table-column label="纳税人识别号" align="center" width="200" prop="taxpayerCode"> </el-table-column>
          <el-table-column label="开票电话" align="center" width="170" prop="drawerPhone"> </el-table-column>
          <el-table-column label="法人姓名" align="center" width="170" prop="legalPerson"> </el-table-column>
          <el-table-column label="开户银行" align="center" width="170" prop="bankOfDeposit"> </el-table-column>
          <el-table-column label="开户账号" align="center" width="170" prop="accountNumber"> </el-table-column>
          <el-table-column label="开票终端编码" align="center" width="170" prop="invoiceTerminalList">
            <template slot-scope="scope">
              <p v-for="item in scope.row.invoiceTerminalList" :key="item.id">{{ item.invoiceTerminalCode }}</p>
            </template>
          </el-table-column>
          <el-table-column label="审核状态" align="center" width="170" prop="auditStatus">
            <template slot-scope="scope">
              <div class="">
                {{ scope.row.auditStatus === 0 ? '未审核' : scope.row.auditStatus === 1 ? '审核通过' : '审核驳回' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="280">
            <template slot-scope="scope">
              <el-button
                type="text"
                class="xg czBtn"
                size="small"
                v-if="scope.row.auditStatus == 2"
                @click="handleClick(scope.row, '修改开票抬头')"
              >
                修改
              </el-button>
              <el-button type="text" class="xg czBtn" size="small" @click="handleClick(scope.row, '添加开票终端')">
                添加开票终端
              </el-button>
              <el-button
                type="text"
                class="xg czBtn"
                size="small"
                @click="handleClick(scope.row, '绑定组织')"
                v-if="scope.row.bindOrganizationStatus == 0"
              >
                绑定组织
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div style="height: 60%">
      <div class="billing_title">
        <h1>商品税目编码</h1>
        <el-button
          icon="iconfont icon-jiufuqianbaoicon06"
          size="mini"
          class="exportBtn add"
          @click="addBillingHeads('')"
        >
          新增税目编码
        </el-button>
      </div>

      <div class="table_box" style="height: calc(100% - 92px); margin-bottom: 0">
        <el-table
          :data="tableData"
          class="table"
          height="100%"
          border
          ref="jdjgTable"
          :header-cell-style="{
            padding: '0px',
            background: 'linear-gradient(0deg, #F4F6F9, #EAECF4, #F3F6F9)'
          }"
          :row-class-name="tabRowClassName"
          header-row-class-name="mapTable_th"
        >
          <el-table-column label="编码" align="center" width="240" prop="itemCode"> </el-table-column>
          <el-table-column label="分类名称" align="center" width="240" prop="itemName"> </el-table-column>
          <el-table-column label="商品名" align="center" width="260" prop="goodsName"> </el-table-column>
          <el-table-column label="税率" align="center" width="140" prop="rate">
            <template slot-scope="scope">
              <div>{{ scope.row.rate }}{{ scope.row.rate ? '%' : '' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="140">
            <template slot-scope="scope">
              <el-button type="text" class="xg czBtn" size="small" @click="taxClick(scope.row, '修改税目编码')">
                修改
              </el-button>
              <el-button type="text" class="ty czBtn" size="small" @click="taxClick(scope.row, '删除')">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog
      width="1000px"
      :center="true"
      :title="title"
      v-if="visiable"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :visible.sync="visiable"
    >
      <billing-heads-modify
        @close="close"
        v-if="title == '新增开票抬头' || title == '修改开票抬头'"
        :updateFrom="updateFrom"
      ></billing-heads-modify>
      <billing-terminal-modify
        @close="close"
        v-if="title == '添加开票终端'"
        :updateFrom="updateFrom"
      ></billing-terminal-modify>
      <tax-code-modify v-if="title == '新增税目编码'" @close="close"></tax-code-modify>
      <div v-if="title == '修改税目编码'">
        <el-table
          :data="addData"
          class="table"
          height="258px"
          border
          tooltip-effect="light"
          ref="jdjgTable"
          :header-cell-style="{
            padding: '0px',
            background: 'linear-gradient(0deg, #F4F6F9, #EAECF4, #F3F6F9)'
          }"
          :row-class-name="tabRowClassName"
          header-row-class-name="mapTable_th"
        >
          <el-table-column width="60" align="center" type="index" label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="编码" align="center" prop="itemCode" width="200"> </el-table-column>
          <el-table-column label="分类名称" align="center" prop="itemName" width="140" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="商品名称" align="center" prop="goodsName">
            <template slot-scope="scope">
              <el-input size="small" placeholder="请输入商品名称" v-model.trim="scope.row.goodsName"> </el-input>
            </template>
          </el-table-column>
          <el-table-column label="税率%" align="center" prop="rate">
            <template slot-scope="scope">
              <el-input size="small" placeholder="请输入税率" v-model.trim="scope.row.rate"> </el-input>
            </template>
          </el-table-column>
        </el-table>
        <div class="footer">
          <el-button size="small" class="commonBtn" @click="closeBtn">取消</el-button>
          <el-button size="small" class="commonBtn1" @click="subBtn">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BillingHeadsModify from './BillingHeadsModify.vue'
import BillingTerminalModify from './BillingTerminalModify.vue'
import TaxCodeModify from './TaxCodeModify.vue'
export default {
  components: { BillingHeadsModify, BillingTerminalModify, TaxCodeModify },
  data() {
    return {
      updateFrom: {},
      title: '',
      addData: [],
      billingData: [],
      tableData: [],
      visiable: false
    }
  },
  mounted() {
    this.getBillingData()
    this.getTaxData()
  },
  methods: {
    // 税目编码列表操作按钮事件
    taxClick(scope, val) {
      if (val === '删除') {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // this.tableData.splice(scope.$index, 1)
          this.$https({
            method: 'post',
            url: '/enterpriseVat/delete',
            data: {
              id: scope.id
            }
          })
            .then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.getTaxData()
              } else {
                this.$message.error(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        })
      } else {
        this.title = '修改税目编码'
        this.visiable = true
        console.log(scope)
        this.addData.push(scope)
      }
    },
    // 修改商品税目信息
    subBtn() {
      let flag = this.addData.forEach(item => {
        return !item.goodsName || !item.rate
      })
      if (flag) {
        this.$message.error('请填写完整需要添加的编码商品名称与税率')
        return
      }
      this.$https({
        method: 'post',
        url: '/enterpriseVat/update',
        data: this.addData[0]
      })
        .then(res => {
          if (res.code == 0) {
            this.close('init')
            this.addData = []
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    closeBtn() {
      this.addData = []
      this.close('')
    },
    // 绑定开票终端失败时，可以通过手动点击来绑定组织
    handleClick(scope, val) {
      if (val == '绑定组织') {
        this.getBind(scope.taxpayerCode)
        return
      }
      this.title = val
      this.updateFrom = scope
      this.visiable = true
    },
    // 获取开票抬头列表
    getBillingData() {
      this.$https({
        method: 'post',
        url: '/invoiceHeader/getInvoiceHeaderList',
        data: {
          enterpriseId: localStorage.getItem('enterpriseId')
        }
      })
        .then(res => {
          if (res.code == 0) {
            this.billingData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取商品税目编码列表
    getTaxData() {
      this.$https({
        method: 'post',
        url: '/enterpriseVat/getList',
        data: {
          enterpriseId: localStorage.getItem('enterpriseId')
        }
      })
        .then(res => {
          if (res.code == 0) {
            // console.log(res.data)
            this.tableData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 绑定组织
    getBind(val) {
      this.$confirm('是否绑定组织?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$https({
          method: 'post',
          url: '/bindOrganization/bind',
          data: {
            organizationTax: val
          }
        })
          .then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      })
    },
    addBillingHeads(val) {
      this.title = '新增税目编码'
      if (val) {
        this.title = '新增开票抬头'
      }
      this.visiable = true
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    },
    closeDialog(done) {
      this.updateFrom = {}
      this.addData = []
      done()
    },
    close(val) {
      this.updateFrom = {}
      this.visiable = false
      if (val) {
        this.getBillingData()
        this.getTaxData()
      }
    }
  }
}
</script>
<style lang="less" scoped>
#billing {
  height: calc(100vh - 188px);
  .billing_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  h1 {
    font-size: 16px;
    font-weight: 500;
    color: #2d2d2d;
    padding-left: 10px;
    border-left: 4px solid #fa7355;
  }
  .table_box {
    position: relative;
    border: 1px solid #ebebeb;
    padding: 20px;
    margin-bottom: 30px;
  }
  .footer {
    .commonBtn,
    .commonBtn1 {
      width: 130px;
    }
    text-align: center;
    margin-top: 40px;
  }
  .ty {
    color: #ff3d3d;
  }
  .xg {
    color: #166df1;
  }
}
</style>
